<html xmlns:layout="http://www.thymeleaf.org/thymeleaf/layout" xmlns:th="http://www.thymeleaf.org" th:remove="tag">
	<div class="ui breadcrumb">
		<a href="#/dashboard" class="section">Dashboard</a>
		<i class="right angle icon divider"></i>
		<a class="section" href="#/admin">Administration</a>
		<i class="right angle icon divider"></i>
		<a class="section" href="#/admin/users">Users</a>
		<i class="right angle icon divider"></i>
		<div class="active section">Create New</div>
	</div>
	<div class="ui divider hidden"></div>
	<div class="ui grid">
		<div class="computer only two wide column"></div>
		<div class="sixteen wide mobile twelve wide computer column">
			<form class="ui form" novalidate="" ng-class="{loading:saving}" name="uform" ng-submit="submit(uform)">
				<h4 class="ui dividing header">Login Information</h4>
				<div class="fields">
					<div class="six wide field required" ng-class="{error:uform.username.$invalid &amp;&amp; uform.username.$dirty}">
						<label>Username</label>
						<div class="ui icon input loading">
							<input type="text" name="username" placeholder="Username" ng-model="user.username" required="" ng-minlength="3" ng-maxlength="50"
							pattern="[a-z][a-z0-9]+(\.[a-z0-9]+)*" username-check="" ng-model-options="{updateOn:'default blur',debounce:{default:1000,blur:0}}"
							/>
							<i class="user icon" ng-show="uform.$pending"></i>
						</div>
						<div class="ui red pointing label" ng-if="uform.username.$invalid &amp;&amp; uform.username.$dirty" ng-messages="uform.username.$error">
							<span ng-message="available">Username already exists</span>
							<span ng-message="required, minlength, maxlength">Username must be between 3 and 50 characters long</span>
						</div>
					</div>
					<div class="ten wide field required">
						<label>Password</label>
						<div class="two fields">
							<div class="field" ng-class="{error:uform.password.$invalid &amp;&amp; uform.password.$dirty}">
								<input type="password" name="password" placeholder="Password" ng-model="user.password" required="" ng-minlength="5" ng-maxlength="100"
								ng-model-options="{updateOn:'default blur',debounce:{default:1000,blur:0}}" />
								<div class="ui red pointing label" ng-if="uform.password.$invalid &amp;&amp; uform.password.$dirty" ng-messages="uform.password.$error">
									<span ng-message="required, minlength, maxlength">Password must be between 5 and 100 characters long</span>
								</div>
							</div>
							<div class="field" ng-class="{error:uform.confirm.$invalid &amp;&amp; uform.confirm.$dirty}">
								<input type="password" name="confirm" placeholder="Password Confirmation" ng-model="user.confirm" required="" compare-to="user.password"
								ng-model-options="{updateOn:'default blur',debounce:{default:1000,blur:0}}" />
								<div class="ui red pointing label" ng-if="uform.confirm.$invalid &amp;&amp; uform.confirm.$dirty" ng-messages="uform.confirm.$error">
									<span ng-message="compareTo">Password confirmation does not match password</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<h4 class="ui dividing header">User Information</h4>
				<div class="fields">
					<div class="ten wide field required">
						<label>Name</label>
						<div class="two fields">
							<div class="field" ng-class="{error:uform.firstName.$invalid &amp;&amp; uform.firstName.$dirty}">
								<input type="text" name="firstName" placeholder="First Name" ng-model="user.firstName" required="" ng-minlength="2" ng-maxlength="50"
								ng-model-options="{updateOn:'default blur',debounce:{default:1000,blur:0}}" />
								<div class="ui red pointing label" ng-if="uform.firstName.$invalid &amp;&amp; uform.firstName.$dirty" ng-messages="uform.firstName.$error">
									<span ng-message="required, minlength, maxlength">First name must be between 2 and 50 characters long</span>
								</div>
							</div>
							<div class="field">
								<input type="text" name="lastName" placeholder="Last Name" ng-model="user.lastName" ng-maxlength="100" />
							</div>
						</div>
					</div>
					<div class="six wide field">
						<label>Email Address</label>
						<input type="email" name="email" placeholder="Email" ng-model="user.email" />
					</div>
				</div>
				<div class="two fields">
					<div class="field">
						<label>Location</label>
						<input type="text" name="location" placeholder="Location" ng-model="user.location" />
					</div>
					<div class="field">
						<label>Website</label>
						<input type="url" name="website" placeholder="Website" ng-model="user.website" />
					</div>
				</div>
				<div class="field">
					<label>Bio</label>
					<textarea rows="3" ng-model="user.bio"></textarea>
				</div>
				<h4 class="ui dividing header">Roles Information</h4>
				<div class="field">
					<label>Roles</label>
					<select multiple="" class="ui dropdown" ng-model="user.roles">
						<option value="">Select Roles</option>
						<option value="ROLE_ADMIN">Administrator</option>
						<option value="ROLE_API">API Consumer</option>
						<option value="ROLE_USER">User</option>
					</select>
				</div>
				<div class="ui right floated buttons">
					<button class="ui negative button" ng-click="reset(uform)">Reset</button>
					<div class="or"></div>
					<button type="submit" class="ui positive button" ng-disabled="uform.$invalid || uform.$pending">Create</button>
				</div>
			</form>
		</div>
	</div>
	<div class="ui small basic modal notification">
		<i class="close icon"></i>
		<div class="ui icon header">
			<span>
				<i class="user icon"></i>
				<span th:remove="tag">User successfully created</span>
			</span>
		</div>
		<div class="content">
			<p>User <strong>{{created.account.username}}</strong> has been successfuly created</p>
			<div class="ui list">
				<div class="item">
					<i class="user icon"></i>
					<div class="content">{{created.account.username}}</div>
				</div>
				<div class="item" ng-if="created.email">
					<i class="mail icon"></i>
					<div class="content">{{created.email}}</div>
				</div>
				<div class="item" ng-if="created.website">
					<i class="linkify icon"></i>
					<div class="content">{{created.website}}</div>
				</div>
				<div class="item" ng-if="created.account.authorities.length">
					<i class="users icon"></i>
					<div class="content">{{(created.account.authorities|roleNames).join(', ')}}</div>
				</div>
			</div>
		</div>
	</div>

</html>